<template>
	<view class="mobile-binding">
		<view class="title">
			手机号绑定
		</view>
		<view class="lo-form">
			<view class="lo-form-item">
				<view class="select-width" @click="onSelectShow">
					<view class="label-seled">
						<text class="u-line-1">+{{mobileType}}</text>
						<u-icon name="arrow-down-fill" :size="18"></u-icon>
					</view>
					<u-select v-model="show" 
						:default-value="[0]"
						:list="list" 
						@confirm="onMobileTypeConfirm"></u-select>
				</view>
				<view class="lo-input">
					<u-input v-model="mobile" 
						class="cu-input"
						type="number" 
						placeholder="手机号"/>
				</view>
			</view>
			<view class="lo-form-item">
				<view class="lo-input">
					<u-input v-model="code" 
						class="cu-input"
						type="number" 
						placeholder="验证码"/>
				</view>
				<view class="lo-verification" 
					v-if="codeIf"
					@click="handleVerificationCode">
					获取验证码
				</view>
				<view class="lo-verification lo-color" v-else>
					重新发送 <text>( {{time}}s )</text>
				</view>
			</view>
			
			<u-button type="primary" 
				shape="circle" 
				:ripple="true" 
				@click="handleBindingClick">
				确定
			</u-button>
			
		</view>
		
		<tfgg-verify ref="verifyElement" @result="verifyResult" v-if="comConfigVerify"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [
					{
						value: '1',
						label: '86'
					},
					{
						value: '2',
						label: '1111'
					}
				],
				mobileType: '86',
				mobile: '',
				time: 60,
				codeIf: true,
				code: ''
			}
		},
		computed: {
			//当前是否需要滑动验证功能
			comConfigVerify(){
				return this.$config.VertifyBeforeSendCode
			}
		},
		methods: {
			onSelectShow(){
				this.show = true;
			},
			
			/**选中号码类型*/
			onMobileTypeConfirm(e){
				this.mobileType = e[0].label;
			},
			
			/**确定绑定手机号*/
			handleBindingClick(){
				let title = '';
				if(!this.$u.test.mobile(this.mobile)){
					title = '手机号不正确。';
				}else if(!this.$u.test.code(this.code, 6)){
					title = '验证码不正确。';
				}
				if(title != ''){
					uni.showToast({
						title,
						icon: 'none'
					})
					return
				}
			},
			
			/**获取验证码*/
			handleVerificationCode(){
				if(!this.$u.test.mobile(this.mobile)){
					uni.showToast({
						title: '手机号不正确。',
						icon: 'none'
					})
					return
				}
				if(this.comConfigVerify){
					//开启滑块校验
					this.$refs.verifyElement.show();
				}else{
					this.codeIf = false;
					this.timeFn();
				}
			},
			
			/* 校验结果回调函数 */
			verifyResult(res){
				if(res){
					this.$refs.verifyElement.reset();//校验重置插件
					this.codeIf = false;
					this.timeFn();
					return
				}
				uni.showToast({
					title: '验证失败！',
					icon: 'error',
					success: () => {
						this.$refs.verifyElement.reset();//校验重置插件
					}
				})
			},
			
			/**倒计时*/
			timeFn(){
				if(this.time == 0){
					this.codeIf = true;
					this.time = 60;
				}else{
					this.time--;
					setTimeout(() => {
					 this.timeFn()
					},1000)
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.mobile-binding{
		padding: 0 60rpx;
		.title{
			text-align: center;
			color: #000;
			font-size: 48rpx;
			font-weight: bold;
			margin: 100rpx;
		}
		.lo-form{
			margin: 20rpx 0;
			.lo-form-item{
				margin-bottom: 40rpx;
				height: 88rpx;
				display: flex;
				border-radius: 50rpx;
				background-color: #F3F4F6;
				.select-width{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 20rpx;
					.label-seled{
						display: flex;
						align-items: center;
						color: #000;
						font-size: 30rpx;
						text{
							text-align: center;
							width: 100rpx;
						}
					}
				}
				.lo-input{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					margin-right: 20rpx;
					.cu-input{
						width: 100%;
					}
				}
				.lo-verification{
					color: #2979FF;
					font-size: 24rpx;
					white-space:nowrap;
					display: flex;
					align-items: center;
					padding-right: 40rpx;
					padding-left: 20rpx;
					&:active {
						color: rgba($color: #2979FF, $alpha: 0.7);
					}
				}
				.lo-color{
					color: #909399;
					text {
						padding-left: 10rpx;
					}
				}
			}

		}
		::v-deep .u-size-default{
			height: 88rpx !important;
			line-height: 88rpx !important;
		}
	}
</style>
